<template>
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header"><span><i class="fa fa-address-card"></i>  账户信息</span></div>
        <div class="layui-card-body">
            <div class="layui-form-item">
                <input type="text" v-model="cardId" maxlength="18" lay-verify="title" placeholder="请输入要查询的账户" autocomplete="off" class="layui-input my_label" oninput = "value=value.replace(/[^\d]/g,'')" style="float:left;width: 50%;">
                <button class="btn btn-primary" @click.prevent="queryAccountInfo" data-dismiss="modal" style="margin-top:1px;margin-left:10px;">账户信息查询</button>
            </div>
        </div>
      </div>
      <div class="layui-card"> <!--v-show="acct_info_show"-->
        <fieldset disabled="disabled">
        <div class="layui-card-body" style="float:left;width:50%;">
            <div class="layui-form-item">
                <label class="layui-form-label my_label">用户名</label>
                <input type="text" v-model="uname" lay-verify="title" autocomplete="off" class="layui-input my_input form-control">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label my_label">用户身份证</label>
                <input type="text" v-model="uid" lay-verify="title" autocomplete="off" class="layui-input my_input form-control">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label my_label">性别</label>
                <input type="text" v-model="usex" lay-verify="title" autocomplete="off" class="layui-input my_input form-control">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label my_label">年龄</label>
                <input type="text" v-model="uage" lay-verify="title" autocomplete="off" class="layui-input my_input form-control">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label my_label">家庭住址</label>
                <input type="text" v-model="uhome" lay-verify="title" autocomplete="off" class="layui-input my_input form-control">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label my_label">电话号码</label>
                <input type="text" v-model="utelephone" lay-verify="title" autocomplete="off" class="layui-input my_input form-control">
            </div>
        </div>
        <img src="/loginImg/userInfo.jpg" alt="" class="tranferimg" style="width: 50%;float:right;margin-top:15px;position:relative;right:20px;">
        </fieldset>
      </div>
    </div>
</template>
<script>
import Qs from 'qs'
export default {
    data (){
        return {
            // acct_info_show:true,//表单的显示
            //请求参数
            cardId:'',//查询账号
            //响应参数
            uname:'',
            uid:'',
            usex:'',
            uage:'',
            uhome:'',
            utelephone:'',
        }
    },
    methods: {
        queryAccountInfo: function(){//查询账户信息
            var cardIdRegix=/^[\d]{18}$/;
            if(this.cardId.match(cardIdRegix)){
                var data=Qs.stringify({
                "cardId":this.cardId
                })
                this.$axios
                .post('/bk-user/queryAccountInfo',
                        data,
                        {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
                ) 
                .then(result => {
                    if(result.data.code===200){
                    this.uid=result.data.data[0].uid;
                    this.uname=result.data.data[0].uname;
                    if(result.data.data[0].usex=="1"){
                        this.usex="男";
                    }else{
                        this.usex="女";
                    }
                    
                    this.uage=result.data.data[0].age;
                    this.uhome=result.data.data[0].uhome;
                    this.utelephone=result.data.data[0].utelephone;
                    }else{
                        this.$message.error(result.data.message);
                    }
                })
                .catch(failResponse => {
                    
                })
            }else{
                this.$message.error("账户格式不正确,需要18位");
            }
        }
    }
}
</script>
<style>
.my_label{
    width:110px;
}
.my_input{
    width: 45%;
    position: relative;
    float: left;
}
</style>
